import React, { useEffect, useState } from "react";
import {  useNavigate, useSearchParams } from "react-router-dom";
import { Button, NavBar, Space, Toast } from "antd-mobile";
import axios from "../../api/http";
import { Input } from 'antd-mobile'
import { Collapse } from 'antd-mobile'
import './det.css'
import { Popup } from 'antd-mobile'
import { Rate,   } from 'antd-mobile'
function Index() {
    const [value, setValue] = useState('')
    //  const {state}=useLocation()
  let nav = useNavigate();
  const [sp] = useSearchParams();
  console.log(sp);
  const data = Object.fromEntries(sp);
  console.log(data);
  const start = sp.get("start");
  const end = sp.get("end");
  const get = async () => {
    const resp = await axios.get("/api/trip/airplane", {
      params: { start, end, page },
    });
    console.log(resp);
    setuser(user.concat(resp.data.data));
    setpage(page + 1);
  };
  useEffect(() => {
    get();
  }, []);
  const [user, setuser] = useState([]);
  const [page, setpage] = useState(1);
const setlist=['二等座','一等座','商务舱']
const num=[
   '￥553','￥930','￥1873'
]
const [visible1, setVisible1] = useState(false)
const dd=()=>{
 nav('/cheng')
}
  return (
    <div>
      <div>
        <NavBar onBack={() => nav(-1)} style={{ backgroundColor: "gray" }}>
      
          02月18日 &emsp;&emsp; 周二 
        </NavBar>
      </div>
      {/* 0-1展示车次的详细信息，包括出发站、到达站、出发时间、到达时间、经停站、票价等。 */}
      <div style={{ backgroundColor: "#f2f2f2" }}>
         <div  onClick={() => {
                setVisible1(true)
              }}>
            <p style={{display:'flex'}}>
                <h2>06:10</h2> &emsp;  &emsp;<span style={{marginTop:'15px'}}> 5时59分</span>&emsp;  &emsp; <h2>12:09</h2>
                </p>
            <p style={{display:'flex'}}> <h4>北京南</h4>&emsp;  &emsp; <span style={{marginTop:'15px'}}>G101</span>&emsp;  &emsp; <h4>上海虹桥</h4></p>
           
            <Popup
              visible={visible1}
              onMaskClick={() => {
                setVisible1(false)
              }}
            //   0-1展示车次的详细信息，包括出发站、到达站、出发时间、到达时间、经停站、票价等。
              showCloseButton
              onClose={() => {
                setVisible1(false)
              }}
              bodyStyle={{
                borderTopLeftRadius: '8px',
                borderTopRightRadius: '8px',
                minHeight: '40vh',
              }}
            >
              <div style={{textAlign:'center',borderRadius:'20px'}} className="ke">
                    <h2>G101时刻表</h2>
                    <p> &emsp;车站名称 &emsp; &emsp;到达 &emsp; &emsp; 出发  &emsp; &emsp;停留</p>
                    <p> &emsp;北京南 &emsp; &emsp;-- &emsp; &emsp; 06:10  &emsp; &emsp;--</p>
                    <p> &emsp;天津南 &emsp; &emsp;06:44 &emsp; &emsp; 06:46  &emsp; &emsp;2分钟</p>

                    <p> &emsp;德州东 &emsp; &emsp;07:30 &emsp; &emsp; 07:32  &emsp; &emsp;2分钟</p>
                    <p> &emsp;济南西 &emsp; &emsp;07:56 &emsp; &emsp; 07:58  &emsp; &emsp;2分钟</p>
                    <p> &emsp;徐州东 &emsp; &emsp;09:15 &emsp; &emsp; 09:20  &emsp; &emsp;5分钟</p>
              </div>
            </Popup>
         </div>

            </div>
    <div>
    <Collapse accordion>
    {/* 0-1展示车次的详细信息，包括出发站、到达站、出发时间、到达时间、经停站、票价等。 */}
          {
            setlist.map((item,index)=>{
                return <Collapse.Panel key={index} title={`${item}${num[index]}`}>
              {/* {state.aasn} */}
                   <Button onClick={()=>dd()}>订票</Button>
                
                </Collapse.Panel>
            })
          }
        
          
        </Collapse>

    </div>
    {/* 0-3提供相关车次的其他换乘方案，方便用户规划行程。 */}
<div>
    <p>二等座已售空，为您找到以下有票方案</p>
    <div style={{backgroundColor:'#f2f2f2'}}>
        <Button>上车</Button>---<Button>二等座</Button>---<Button>补4站</Button><Button>下车</Button>
        <p>北京南&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;宿州东&emsp;&emsp;&emsp;上海虹桥</p>
    </div>
</div>
{/* 0-4实现用户评价和留言功能，让用户可以分享自己的乘车体验。 */}
<div>
    <h3>你愿意推荐好友来同程旅行预订火车票吗？</h3>
    <p><span>非常不满意</span>&emsp;&emsp;<span>非常满意</span></p>
    <Rate onChange={val => Toast.show(val.toString())} />
        <h2>不推荐，我要吐槽：</h2>
        <Button style={{margin:'10px'}}>账号登录麻烦</Button><Button style={{margin:'10px'}}>退票到账慢</Button>
        <Button style={{margin:'10px'}}>改签不好用</Button><Button style={{margin:'10px'}}>出票速度慢</Button>
        <Button style={{margin:'10px'}}>出票失败多</Button>
        <Input
          placeholder='其他想说的（选填）'
          value={value}
          onChange={val => {
            setValue(val)
          }}
          style={{backgroundColor:'#f2f2f2'}}
        />
         <Button block color='primary' size='large' style={{backgroundColor:'green'}}>
        提交
        </Button>
</div>
    </div>
  );
}

export default Index;
